<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue"
import msg from "@/msg"
import { useMainStore } from "@/store"
import { NMenu, MenuOption, NWatermark } from "naive-ui"
import { h } from "vue"
import { RouterLink } from "vue-router"
const mainStore = useMainStore()

const menuOptions: MenuOption[] = [
  {
    label: () =>
      h(RouterLink, { to: { name: "home" } }, { default: () => "首页" }),
    key: "home"
  },
  {
    label: () =>
      h(RouterLink, { to: { name: "login" } }, { default: () => "登入" }),
    key: "login"
  }
]
</script>

<template>
  <n-watermark
    content="vue3+TS+pinia"
    cross
    selectable
    :font-size="16"
    :line-height="16"
    :width="192"
    :height="128"
    :x-offset="12"
    :y-offset="28"
    :rotate="-15"
  >
    <div class="pinia">
      -------------pinia模拟---------父组件---------- 视点：<br />
      {{ mainStore.view }}
      省份: {{ mainStore.name }} 计数: {{ mainStore.count }}<br />
      <HelloWorld :msg="msg.text" />
    </div>
    <br />
    <div class="route">
      --------------路由切换----------------------<br />
      <!-- <router-link to="/">主页</router-link>&nbsp;&nbsp;
    <router-link to="/login">登入</router-link> -->
      <n-menu :options="menuOptions"></n-menu>
      <div>
        <router-view></router-view>
      </div>
    </div>
  </n-watermark>
</template>

<style scoped lang="scss">
.pinia {
  border: 1px solid #ccc;
  padding: 10px;
}
.route {
  border: 1px solid #ccc;
  padding: 20px;
}
</style>
